import React, { useState } from 'react';
import { TestKeyConnection } from '../../wailsjs/go/main/App';
import { FaServer, FaLink, FaSave } from 'react-icons/fa';

const ServerConnection = ({ onConnectionStatusChange, serverInfo, onServerInfoChange }) => {
  const [status, setStatus] = useState({
    message: '',
    isError: false,
    loading: false
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    onServerInfoChange({
      ...serverInfo,
      [name]: value
    });
  };

  const testConnection = async () => {
    setStatus({ message: '正在测试连接...', isError: false, loading: true });
    try {
      // 调用后端Wails方法进行真实连接测试
      const result = await TestKeyConnection(
        serverInfo.hostname,
        serverInfo.port,
        serverInfo.username,
        serverInfo.password
      );
      setStatus({ message: result.message || '连接成功', isError: !result.success, loading: false });
      onConnectionStatusChange(result.success);
    } catch (error) {
      setStatus({ message: `连接失败: ${error.message}`, isError: true, loading: false });
      onConnectionStatusChange(false);
    }
  };

  const saveSettings = () => {
    // 这里可以添加保存设置的逻辑
    setStatus({ message: '设置已保存', isError: false, loading: false });
  };

  return (
    <div className="server-connection">
      <h2>服务器连接</h2>
      <div className="form-group">
        <label htmlFor="hostname">主机名/IP地址</label>
        <input
          type="text"
          id="hostname"
          name="hostname"
          value={serverInfo.hostname}
          onChange={handleInputChange}
          placeholder="例如: 192.168.1.100"
        />
      </div>
      <div className="form-group">
        <label htmlFor="port">SSH端口</label>
        <input
          type="text"
          id="port"
          name="port"
          value={serverInfo.port}
          onChange={handleInputChange}
          placeholder="默认: 22"
        />
      </div>
      <div className="form-group">
        <label htmlFor="username">用户名</label>
        <input
          type="text"
          id="username"
          name="username"
          value={serverInfo.username}
          onChange={handleInputChange}
          placeholder="例如: root"
        />
      </div>
      <div className="form-group">
        <label htmlFor="password">密码</label>
        <input
          type="password"
          id="password"
          name="password"
          value={serverInfo.password}
          onChange={handleInputChange}
          placeholder="请输入服务器密码"
        />
      </div>
      <div className="button-group">
        <button 
          onClick={testConnection} 
          disabled={status.loading || !serverInfo.hostname || !serverInfo.username || !serverInfo.password} 
          className="primary-button"
        >
          <FaLink style={{ marginRight: '8px' }} /> 测试连接
        </button>
        <button onClick={saveSettings} disabled={status.loading} className="secondary-button">
          <FaSave style={{ marginRight: '8px' }} /> 保存设置
        </button>
      </div>
      {status.message && (
        <div className={`status-message ${status.isError ? 'error' : ''}`}>
          {status.message}
          {status.loading && <span className="loading-spinner"></span>}
        </div>
      )}
    </div>
  );
};

export default ServerConnection;